教程|蠕动的头发（一）

本文通俗易懂，因为我也不是专业的

看不懂的地方意味着我在装13，可跳过

前 言

实现「蠕动的头发」那篇文章中的交互性动态效果需要三个过程。

❶ 用绘图软件 AI 对文章进行排版，并绘制插图及「头发」等元素。

❷ 排版完成后储存为 svg 格式，得到文章的 svg 代码，利用 135编辑器的 HTML 工具，将代码转化为微信图文。

❸ 利用 svg 的<animate>标签，实现「头发」到「小心心」的动态转化。

该教程分2~3次完成，具体分几次看我心情。本篇文章仅涉及上述前两个过程。

 工具 ：Adobe Illustrator，135编辑器。没有接触过 AI 的童鞋可 放弃该教程 先滑到文末领取，本教程只涉及AI的皮毛，零基础也可放心使用。

排 版

有 AI 基础的童鞋可以跳过

❶ 打开 Adobe Illustrator 。

❷ 新建一个画板，用文字工具输入文字内容，并利用字符和段落工具进行文字排版。【窗口→文字→字符/段落】

以该文为例，文中诗的排版模仿《冯·唐诗百首》中的大面积留白设计，和简单的手绘插画点缀。▼

在第三方微信编辑器中，行间距通常设置为 1.5~1.75，利用 AI 进行文字排版时，可将字号乘 1.5 倍，计算出相应的字间距，例如下图中字号为18pt，当行间距设置为18×1.5=27pt 时较为美观。字间距也可进行相应调整。▼

❸ 导入提前准备好的插画。有能力的童鞋可以自行用钢笔工具绘制（小编比较水，只会找素材）。用 AI 排版的优点就在于，文章排版以画板的形式呈现，不受第三方编辑器的限制，能够任意对文章的任意位置进行点缀和装饰。

 注意 ：只能导入矢量素材，可在 freepik 上搜.eps或者.ai 格式的素材，或者在 iconfont 中获取 ai 格式或 svg 格式的 icon.如果直接导入位图，转化为 svg 时会出现一大堆代码，且无法实现动态效果。文末有小编整理的部分手绘风矢量素材。

❹ 用钢笔画头发。钢笔工具的使用方法……亲自玩一玩就会，实在玩不会，可以在 UI 中国中搜索免费教程。画好头发后，用添加锚点工具，在头发上添加 2~3 个锚点，以便之后通过移动锚点，将头发改成小心心的形状。（为了让头发更生动、明显，让强迫症患者更难受，小编把插画和文字的颜色改为浅灰色）▼

< s v g >

这里是重点

❶ 将文章做好排版后，保存为 svg 格式。【文件→存储为→文件类型→svg】，在存储界面直接点击「svg 代码」可直接弹出浏览器窗口，查看 svg 代码。或者可以在保存后，双击 svg 文件，打开网页后，右键查看网页源代码，同样可以查看 svg 代码。你看到的估计是这种的东西 ▼

W  T  F ? !

鬼都看不懂这是什么鬼？！

现在你可以 选择放弃、取关、继续往下看

❷ 打开 135 编辑器，戳「HTML」按钮，把刚才的所有代码都复制到 HTML 编辑页面。  注意 ：仅保留标签<svg>后面的内容即可，前面的几行代码可以删掉。

❸ 再戳一次「HTML」按钮，回到可视化编辑页面，你会发现，排版的部分内容丢失了！！右下角的装饰没了！画的头发也没了！▼

W  T  F ? !

我 TM 画的 头发 呢？！

现在你可以 选择放弃、取关、继续往下看

❹ <svg>是 HTML 语言中的一个标签，绝大多数的 HTML 语言都是由两个闭合（成对出现）的标签构成，例如，你可以发现刚才那一大堆代码是被<svg>…</svg>这个成对的标签裹起来的。类似的你还会发现<text>…</text>，中间裹着一堆代码，包含刚才排版的诗句，还有<path>…</path>裹着一堆不知所云得到代码。只有当标签闭合时（就是说两个标签成对出现），标签内部的代码才能发挥作用。

其实只要学过英语，这些标签意思都是很好理解的：

<svg>…</svg>：相当于一张画布，里面可以放文字、路径（可以简单理解为图形）、几何图形等内容。首标签<svg…>中会写有部分代码，用于控制画布的尺寸等性质。尾标签</svg>放在所有代码后面，表示闭合。

<text>…</text>：很明显是存放文字的标签，首标签<text…>中会写有部分代码，用于控制文字的字号、位置、间距等性质。尾标签</text>放在文字后面，表示闭合。

<path>…</path>：存放路径的标签，简单理解为把图形中的每条线用坐标表示出来，进而组合成一个图形。例如刚才在 AI 中插入的叶子素材、绘制的头发，都是在<path>标签中存放的。<path>标签在135编辑器中经常出BUG，出现类似于上述丢失部分素材的情况，原因就是标签的闭合方式不正确。▼

在上面第一张截图里我们可以看到，在一大段路径代码的结尾处，仅以“>”的方式闭合，而没有用</path>闭合。第二张截图中可以看到，所有代码的末尾位置，出现了多个</path>闭合标签堆积的状况。这种情况下，135编辑器是无法识别<path>标签中的内容的。

 解决方法 ：把结尾处堆积的</path>删除，在每个路径代码结束处的“>”后面，添加上</path>，如下图所示，为一个完整的，标准的，135可以识别的路径代码。▼

 注意 ：<path……/> </path> 这种写法也是不对的，首标签结尾处不能加“/”。

改完闭合标签之后，就真正完成了从 AI 到微信图文的转化，缺失的头发和叶子都重新出现了，此时再对头发的路径代码进行加工，即可实现由头发到小心心的转化。▼

预 告

下一期文章将会详细介绍如何给<path>标签添加路径动画。在此之前，请各位尚未放弃的童鞋，尝试完成一次 AI 到微信图文的转化。建议在度娘和知乎的帮助下，自学一下HTML语言和<svg>的基础内容（了解其闭合原理，基本语法即可），只要学过英语，理解起来基本没有压力。

几天前我学 AI 和 HTML 的时候

心里也是WOC、WOC的

毕竟

装逼一分钟，台下十年功

把十年功总结给大家

以感谢这几天送我的 40 余张小心心

另外

把《蠕动的头发》这篇文章转发到朋友圈

截图发送到后台

可获取小编精心整理的

AI 安装包、破解包

以及近百个矢量手绘素材

原创文章，想转载找我商量

觉得文首动图和文末二维码有点6的

点个赞

赞多了

我就写教程